<template>
  <div class="demo">
    <div class="demo-title">多彩徽标</div>
    <div class="demo-content">
      <h4 style="margin-bottom: 16px">Presets:</h4>
      <div>
        <div v-for="color in colors" :key="color">
          <Badge :color="color" :text="color" />
        </div>
      </div>
      <Divider orientation="left">Custom</Divider>
      <Badge color="#f50" text="#f50" />
      <br />
      <Badge color="#2db7f5" text="#2db7f5" />
      <br />
      <Badge color="#87d068" text="#87d068" />
      <br />
      <Badge color="#108ee9" text="#108ee9" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Badge from '@sscd/badge';
  import Divider from '@sscd/divider';
  const colors = [
    'pink',
    'red',
    'yellow',
    'orange',
    'cyan',
    'green',
    'blue',
    'purple',
    'geekblue',
    'magenta',
    'volcano',
    'gold',
    'lime',
  ];
</script>

<style lang="less" scoped>
  .demo-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
</style>
